<template>
  <div class="report_page">
    <div class="dict_panes">
      <div class="dict_item" v-for="item in dictList" :key="item.name">
        <div class="dict_title">
          {{ item.title }}
          <a-popover trigger="hover">
            <template slot="content">
              <p>{{ item.tips }}</p>
            </template>
            <a-icon class="pointer" type="question-circle" />
          </a-popover>
        </div>
        <div :class="['dict_data', item.isHighLight ? 'hight_light' : '']">{{ item.number }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dictList: [
        { name: 'view', title: '观看次数', tips: 'tips', isHighLight: true },
        { name: 'viewCost', title: '观看成本（元）', tips: 'tips', isHighLight: true },
        { name: 'cost21', title: '花费（元）', tips: 'tips' },
        { name: 'cost22', title: '互动量', tips: 'tips' },
        { name: 'cost34', title: '互动率', tips: 'tips', isHighLight: true },
        { name: 'costa', title: '平均观看时长（秒）', tips: 'tips', isHighLight: true },
        { name: 'costb', title: '直播点赞量', tips: 'tips' },
        { name: 'cos1t', title: '直播分享量', tips: 'tips' },
        { name: 'cost2', title: '直播评论量', tips: 'tips' },
        { name: 'cost3', title: '引导进店量', tips: 'tips' },
        { name: 'cost4', title: '引导进店率', tips: 'tips' },
        { name: 'cost5', title: '粉丝关注量', tips: 'tips', isHighLight: true },
        { name: 'cost6', title: '成交订单量', tips: 'tips' },
        { name: 'cost7', title: '成交金额（元）', tips: 'tips', isHighLight: true },
        { name: 'cost8', title: '收藏宝贝量', tips: 'tips' },
        { name: 'cost9', title: '商品加购数', tips: 'tips' },
        { name: 'cost0', title: '投资回报率', tips: 'tips', isHighLight: true },
        { name: 'cost11', title: '预售订单量', tips: 'tips' },
        { name: 'cost12', title: '预售成交金额（元）', tips: 'tips' },
        { name: 'cost13', title: '购物金充值笔数', tips: 'tips' },
        { name: 'cost14', title: '购物金充值金额（元）', tips: 'tips' },
      ],
    }
  },
  methods: {
    getDataList () {
      const dictList = [...this.dictList]
      const dataInfo = {
        view: 326866,
        viewCost: 23244,
        cost21: 4324,
        cost2: 2134,
        cost3: 4434,
        cost4: 3435,
        cost5: 143535,
        cost14: 3435
      }
      for (let key in dataInfo) {
        for (let i = 0; i < dictList.length; i++) {
          const dict = dictList[i]
          if (dict.name === key) {
            dict.number = dataInfo[key]
            break
          }
        }
      }
    }
  },
  created () {
    this.getDataList()
  },
}
</script>

<style lang="less" scoped>
.pointer {
  cursor: pointer;
}
.report_page {
  width: 100%;
}
.dict_panes {
  display: flex;
  flex-wrap: wrap;
  .dict_item {
    cursor: default;
    width: 20%;
    // flex: 1;
    margin-bottom: 40px;

    .dict_title {
      font-size: 12px;
      color: #adadad;
    }
    .dict_data {
      font-size: 24px;
      color: #282828;
      font-weight: bold;
      &.hight_light {
        color: #1890ff;
      }
    }
  }
}
</style>